<template>
	<view>
		<view class="goods-gird">
			<view v-for="item in list" :key="item._id" class="good-item">
				<image :src="item.goods_small_logo">
				</image>
				<view class="title">{{item.goods_name}}</view>
				<view>{{item.goods_price}}</view>
			</view>
		</view>
		<!-- 	<view class="get-more" v-if="list.length < total && this.length !== 0">加载更多...</view>
		<view class="get-more" v-else>----到底了---</view> -->
		<view class="get-more">{{bottomText}}</view>
	</view>


</template>

<script>
	import {
		getGoodsApi
	} from '@/apis/goods.js';
	export default {
		data() {
			return {
				list: [],
				total: 0, //总条数
				params: {
					pageSize: 6,
					currentPage: 1,
				}
			};
		},
		computed: {
			bottomText() {
				if (this.list.length < this.total && this.length !== 0) {
					return "加载中..."
				} else {
					return "----到底了---";
				}
			}
		},
		mounted() {
			this.getGoods();
		},
		//用户下拉刷新的时候会自动触发的回调函数
		onPullDownRefresh() {
			console.log('onPullDownRefresh执行了')
			//1. 重置数据
			this.list = [];
			this.total = 0;
			this.params = {
				pageSize: 6,
				currentPage: 1,
			}
			// 2. 重新发送接口
			this.getGoods()
				.then(() => {
					//停止下拉刷新
					uni.stopPullDownRefresh();
				})


		},
		//页面触底时 会触发的回调函数
		onReachBottom() {
			console.log("onReachBottom执行了")
			this.getGoods();
		},
		methods: {
			getGoods() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.list.length === this.total && this.list.length !== 0) {
					return;
				}
				return getGoodsApi(this.params)
					.then(res => {
						console.log("res", res)
						const {
							total,
							message
						} = res;
						// this.list = res;
						this.list = [...this.list, ...message];
						this.total = total;
						this.params.currentPage++;
					})
			}
		}
	}
</script>

<style lang="scss">
	.goods-gird {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10rpx;
	}

	.good-item {
		display: flex;
		flex-direction: column;

		image {
			width: 100%;
		}

		.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.get-more {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}
</style>
